<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一个自适应矩形，水平垂直居中，且宽高比为 2:1</title>
<style type="text/css">
</style>
</head>
<body>
<pre>
/*实现原理参考自适应正方形和水平居中方式*/
.box {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;

  width: 10%;
  height: 0;
  padding-top: 20%;
  background: tomato;
}
</pre>
<script type="text/javascript">
</script>
</body>
</html>